<!-- 笔试确认页面 -->
<template>
  <div class="interview-content">
    <div class="interview-header">
      <div class="header-content">
        <h1>模拟笔试</h1>
        <a-button type="link" @click="viewRecords" class="view-records-btn">
          <template #icon>
            <file-search-outlined />
          </template>
          查看笔试记录
        </a-button>
      </div>
      <a-steps :current="currentStep" class="steps">
        <a-step title="笔试说明" />
        <a-step title="岗位选择" />
        <a-step title="开始笔试" />
      </a-steps>
    </div>

    <div class="interview-body">
      <!-- 笔试说明 -->
      <div v-if="currentStep === 0" class="setup-section">
        <a-card title="笔试说明" class="setup-card">
          <div class="exam-intro">
            <h3>欢迎参加模拟笔试</h3>
            <a-divider />
            <div class="intro-content">
              <div class="intro-item">
                <h4>
                  <clock-circle-outlined />
                  考试时长
                </h4>
                <p>本次笔试时长为<span class="highlight">90分钟</span>，请合理安排答题时间。</p>
              </div>
              <div class="intro-item">
                <h4>
                  <file-outlined />
                  题目构成
                </h4>
                <p>
                  笔试包含<span class="highlight">10道选择题</span>、<span class="highlight"
                    >6道问答题</span
                  >，如果面试的是技术岗位还有<span class="highlight">2道编程题</span>，满分100分。
                </p>
              </div>
              <div class="intro-item">
                <h4>
                  <warning-outlined />
                  注意事项
                </h4>
                <p>1. 答题过程中请勿刷新页面，否则可能导致已答题目丢失。</p>
                <p>2. 系统会自动保存您的答题进度，但建议及时提交。</p>
                <p>3. 考试时间结束后，系统将自动提交当前答案。</p>
              </div>
            </div>
          </div>
        </a-card>
      </div>

      <!-- 岗位选择 -->
      <div v-if="currentStep === 1" class="setup-section">
        <a-card title="岗位选择" class="setup-card">
          <a-form layout="vertical">
            <a-form-item label="请选择笔试公司">
              <a-select
                v-model:value="interviewInfo.companyId"
                :options="companyList"
                placeholder="请选择公司"
                allow-clear
                @change="handleCompanyChange"
              />
            </a-form-item>
            <a-form-item label="请选择技术领域">
              <a-select
                v-model:value="interviewInfo.techFieldId"
                placeholder="请选择或输入岗位"
                :options="techFieldList"
                style="width: 100%"
                @change="handleTechFieldChange"
              ></a-select>
            </a-form-item>
            <a-form-item label="笔试岗位">
              <a-select
                v-model:value="interviewInfo.positionId"
                placeholder="请选择或输入笔试的岗位"
                :options="positionList"
                style="width: 100%"
              ></a-select>
            </a-form-item>
          </a-form>
        </a-card>
      </div>

      <!-- 确认开始 -->
      <div v-if="currentStep === 2" class="interview-section">
        <a-card title="开始笔试" class="interview-card">
          <div class="start-info">
            <div class="confirm-item">
              <span class="label">笔试公司：</span>
              <span class="value">{{ getCompanyName(interviewInfo.companyId) }}</span>
            </div>
            <div class="confirm-item">
              <span class="label">笔试岗位：</span>
              <span class="value">{{ getTechFieldName(interviewInfo.techFieldId) }}</span>
            </div>
            <div class="confirm-item">
              <span class="label">笔试公司：</span>
              <span class="value">{{ getPositionName(interviewInfo.positionId) }}</span>
            </div>
            <div class="confirm-item">
              <span class="label">考试时长：</span>
              <span class="value">90分钟</span>
            </div>
          </div>
          <a-divider />
          <a-alert
            type="info"
            show-icon
            message="准备就绪"
            description="点击下方按钮开始笔试，计时将立即开始，请确保在不受打扰的环境中进行答题。"
            style="margin-bottom: 24px"
          />
          <div class="start-interview">
            <a-button type="primary" size="large" @click="startExam">
              <template #icon>
                <play-circle-outlined />
              </template>
              开始笔试
            </a-button>
          </div>
        </a-card>
      </div>

      <div class="action-buttons">
        <a-button v-if="currentStep > 0" @click="prevStep">上一步</a-button>
        <a-button
          v-if="currentStep < 2"
          type="primary"
          @click="nextStep"
          :disabled="currentStep === 1 && (!interviewInfo.techFieldId || !interviewInfo.positionId || !interviewInfo.companyId)"
        >
          下一步
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
  ClockCircleOutlined,
  FileOutlined,
  WarningOutlined,
  PlayCircleOutlined,
  FileSearchOutlined,
} from '@ant-design/icons-vue'
import { useLoadingPage } from '@/utils/LoadingHelper'
import {
  getCompanyListUsingGet, getPositionListUsingGet,
  getTechFieldAndPositionUsingGet,
  getTechFieldListUsingGet
} from '@/api/positionController'
import { message } from 'ant-design-vue'
import { generateExamUsingPost } from '@/api/examController'
import gsap from 'gsap'
import { setLocalCache} from '@/utils/LocalStorageUtils'

/**
 * 引入跳转加载页面的工具方法
 * @type {Router}
 */
const router = useRouter()
const { withLoading } = useLoadingPage(router)

const currentStep = ref(0)
//面试信息
const interviewInfo = ref({
  companyId: '',
  techFieldId: '',
  positionId: ''
})

// 技术领域
const techFieldList = ref<any[]>([])
// 面试岗位
const positionList = ref<any[]>([])

const nextStep = () => {
  if (currentStep.value < 2) {
    currentStep.value++
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

/**
 * 开始笔试
 */
const startExam = () => {
  //将笔试的岗位保存到localStorage中
  setLocalCache("examPosition",getPositionName(interviewInfo.value.positionId))

  //跳转到加载页面
  withLoading(
    () =>
      generateExamUsingPost({
        techFieldId: interviewInfo.value.techFieldId as any,
        positionId: interviewInfo.value.positionId as any,
        companyId: interviewInfo.value.companyId as any,
      }),
    `/api/written/interview`, // 操作完成后跳转回当前页面
    '/',
    'exam',
    false,
  )
}
const companyList = ref([])

//查看笔试记录
const viewRecords = () => {
  router.push('/written/record')
}

/**
 * 获取公司列表
 */
const fetchCompanyList = async () => {
  const data = await getCompanyListUsingGet()
  data.data.map((item) => {
    companyList.value.push({ value: item.id, label: item.name })
  })
}

/**
 * 获取技术领域列表
 */
const fetchTechFieldList = async () => {
  const data = await getTechFieldListUsingGet()
  data.data.map((item) => {
    techFieldList.value.push({ value: item.id, label: item.name })
  })
}

/**
 * 根据公司id和技术领域id获取岗位列表
 */
const fetchPositionList = async () => {
  if(!interviewInfo.value.techFieldId || !interviewInfo.value.companyId) return
  const data = await getPositionListUsingGet({
    techFieldId: interviewInfo.value.techFieldId as any,
    companyId: interviewInfo.value.companyId as any,
  })
  data.data.map((item) => {
    positionList.value.push({ value: item.id, label: item.name })
  })
}

//修改面试领域后的回调函数
const handleTechFieldChange = async () => {
  positionList.value = []
  interviewInfo.value.positionId = ''
  // 获取岗位信息
  await fetchPositionList()
}

/**
 * 修改公司后的回调函数
 */
const handleCompanyChange = async () => {
  techFieldList.value = []
  positionList.value = []
  interviewInfo.value.techFieldId = ''
  interviewInfo.value.positionId = ''
  //获取技术领域列表
  await fetchTechFieldList()
}

//根据公司id获取公司名称
const getCompanyName = (id) => {
  const company = companyList.value.find((item) => item.value === id)
  return company ? company.label : ''
}

//根据领域id获取领域名称
const getTechFieldName = (id) => {
  const techField = techFieldList.value.find((item) => item.value === id)
  return techField ? techField.label : ''
}
//根据岗位id获取岗位名称
const getPositionName = (id) => {
  const position = positionList.value.find((item) => item.value === id)
  return position ? position.label : ''
}

onMounted(async () => {
  await fetchCompanyList()
  await fetchTechFieldList()

  await nextTick(() => {
    gsap.from('.interview-content', { opacity: 0, y: 40, duration: 1, ease: 'power3.out' })
    gsap.from('.interview-header', {
      opacity: 0,
      y: -30,
      duration: 0.8,
      delay: 0.2,
      ease: 'power2.out',
    })
    gsap.from('.steps', { opacity: 0, y: 10, duration: 0.7, delay: 0.3 })
    gsap.from('.setup-card', {
      opacity: 0,
      scale: 0.95,
      duration: 0.8,
      delay: 0.4,
      ease: 'back.out(1.7)',
    })
    gsap.from('.interview-card', {
      opacity: 0,
      scale: 0.95,
      duration: 0.8,
      delay: 0.5,
      ease: 'back.out(1.7)',
    })
    gsap.from('.action-buttons', { opacity: 0, y: 10, duration: 0.7, delay: 0.7 })
  })
})
</script>

<style scoped>
.interview-content {
  padding-top: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.interview-header {
  text-align: center;
  margin-bottom: 32px;
}

.interview-header h1 {
  font-size: 28px;
  margin-bottom: 24px;
}

.steps {
  max-width: 600px;
  margin: 0 auto;
}

.setup-card,
.interview-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.exam-intro {
  padding: 16px 8px;
}

.intro-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-item h4 {
  color: #1890ff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.highlight {
  color: #1890ff;
  font-weight: 600;
  padding: 0 4px;
}

.start-interview {
  margin-top: 24px;
  text-align: center;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.confirm-item {
  padding: 12px 16px;
  margin: 8px 0;
  background: #f9f9f9;
  border-radius: 4px;
  transition: all 0.3s ease;
  padding: 12px 0;
  font-size: 16px;
}

.confirm-item .label {
  color: #666;
  margin-right: 8px;
}

.confirm-item .value {
  font-weight: 500;
  color: #1890ff;
}

.start-info {
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.03),
    0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  padding: 16px 24px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.view-records-btn {
  margin-left: 16px;
}

.header-content {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.03),
    0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
</style>
